<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <title>Atom&#39;s View System</title>
  <link data-turbolinks-track="true" href="../../../assets/application-b86a2086c99917c6bf2a9d74b4038381.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="../../../assets/application-c3106c6fe52ccec6f26495730a478cca.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="yzXUiWH6GiCHbvbJOg7usjzA7LawyxwB+oJHEcWTOIM=" name="csrf-token" />
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-3769691-35', 'atom.io');
  ga('send', 'pageview');

</script>

  <meta property="og:url" content="https://atom.io/" />
<meta property="og:site_name" content="Atom" />
<meta property="og:title" content="A hackable text editor for the 21st Century" />
<meta property="og:description" content="At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it." />
<meta property="og:type" content="website" />
<meta property="og:author" content='https://www.facebook.com/GitHub' />
<meta property="og:image" content="http://og.github.com/atom-logo/atom-logo@1200x1200.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta property="og:image" content="http://og.github.com/atom-mark/atom-mark@1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

  <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@AtomEditor" />
<meta property="twitter:creator" content='@github' />
<meta property="twitter:title" content="Atom" />
<meta property="twitter:description" content="A hackable text editor for the 21st Century" />
<meta property="twitter:image:src" content="http://og.github.com/atom-logo/atom-logo@1200x630.png" />
<meta property="twitter:image:width" content="1200" />
<meta property="twitter:image:height" content="630" />

  <link rel="shortcut icon" href="../../../favicon.ico"/>
</head>
<body>

  <div class="footer-push">
    
    

    <header class="header">
  <div class="wrapper">
    <h1 title="Atom">
      <a href="../../../index.html" class="logo"></a>
    </h1>

    <ul class="navigation">
      <li><a class="" href="../../../packages.html">Packages</a></li>
      <li><a class="is-selected" href="../../latest/index.html">Documentation</a></li>
      <li><a href="http://blog.atom.io">Blog</a></li>
      <li><a href="../../../faq.html">FAQ</a></li>
      <li><a class="" href="https://atom.io/contact">Contact</a></li>
    </ul>
  </div>
</header>


    <div class="wrapper documents content-push">
  <div class="columns">
    <div class="column main-column markdown">
        <h2>
<a name="atoms-view-system" href="view-system.html#atoms-view-system"></a>Atom's View System</h2>

<h3>
<a name="spacepen-basics" href="view-system.html#spacepen-basics"></a>SpacePen Basics</h3>

<p>Atom's view system is built around the <a href="http://github.com/nathansobo/space-pen">SpacePen</a> view framework. SpacePen
view objects inherit from the jQuery prototype, and wrap DOM nodes</p>

<p>View objects are actually jQuery wrappers around DOM fragments, supporting all
the typical jQuery traversal and manipulation methods. In addition, view objects
have methods that are view-specific. For example, you could call both general
and view-specific on the global <code>atom.workspaceView</code> instance:</p>

<pre lang="coffeescript"><div class="line"><span class="source coffee"><span>atom</span><span class="meta delimiter method period coffee"><span>.</span></span><span>workspaceView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>find</span><span class="meta brace round coffee"><span>(</span></span><span class="string quoted single coffee"><span class="punctuation definition string begin coffee"><span>'</span></span><span>.editor.active</span><span class="punctuation definition string end coffee"><span>'</span></span></span><span class="meta brace round coffee"><span>)</span></span><span> </span><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> standard jQuery method</span></span></span></div><div class="line"><span class="source coffee"><span>atom</span><span class="meta delimiter method period coffee"><span>.</span></span><span>workspaceView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>getActiveEditor</span><span class="meta brace round coffee"><span>(</span><span>)</span></span><span>      </span><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> view-specific method</span></span></span></div></pre>

<p>If you retrieve a jQuery wrapper for an element associated with a view, use the
<code>.view()</code> method to retrieve the element's view object:</p>

<pre lang="coffeescript"><div class="line"><span class="source coffee"><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> this is a plain jQuery object; you can't call view-specific methods</span></span></span></div><div class="line"><span class="source coffee"><span class="variable assignment coffee"><span class="variable assignment coffee"><span>editorElement </span><span class="keyword operator coffee"><span>=</span></span></span></span><span> atom</span><span class="meta delimiter method period coffee"><span>.</span></span><span>workspaceView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>find</span><span class="meta brace round coffee"><span>(</span></span><span class="string quoted single coffee"><span class="punctuation definition string begin coffee"><span>'</span></span><span>.editor.active</span><span class="punctuation definition string end coffee"><span>'</span></span></span><span class="meta brace round coffee"><span>)</span></span></span></div><div class="line"><span class="source coffee"><span> </span></span></div><div class="line"><span class="source coffee"><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> get the view object by calling `.view()` to call view-specific methods</span></span></span></div><div class="line"><span class="source coffee"><span class="variable assignment coffee"><span class="variable assignment coffee"><span>editorView </span><span class="keyword operator coffee"><span>=</span></span></span></span><span> editorElement</span><span class="meta delimiter method period coffee"><span>.</span></span><span>view</span><span class="meta brace round coffee"><span>(</span><span>)</span></span></span></div><div class="line"><span class="source coffee"><span>editorView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>setCursorBufferPosition</span><span class="meta brace round coffee"><span>(</span></span><span class="meta brace square coffee"><span>[</span></span><span class="constant numeric coffee"><span>1</span></span><span class="meta delimiter object comma coffee"><span>, </span></span><span class="constant numeric coffee"><span>2</span></span><span class="meta brace square coffee"><span>]</span></span><span class="meta brace round coffee"><span>)</span></span></span></div></pre>

<p>Refer to the <a href="http://github.com/nathansobo/space-pen">SpacePen</a> documentation for more details.</p>

<h3>
<a name="workspaceview" href="view-system.html#workspaceview"></a>WorkspaceView</h3>

<p>The root of Atom's view hierarchy is a global called <code>atom.workspaceView</code>, which is a
singleton instance of the <code>WorkspaceView</code> view class. The root view fills the entire
window, and contains every other view. If you open Atom's inspector with
<code>alt-cmd-i</code>, you can see the internal structure of <code>WorkspaceView</code>:</p>

<p><img src="https://f.cloud.github.com/assets/1424/1091631/1932c2d6-166b-11e3-8adf-9690fe82d3b8.png" alt="WorkspaceView in the inspector"></p>

<h4>
<a name="panes" href="view-system.html#panes"></a>Panes</h4>

<p>The <code>WorkspaceView</code> contains <code>prependToBottom/Top/Left/Right</code> and
<code>appendToBottom/Top/Left/Right</code> methods, which are used to add Tool Panels. Tool
panels are elements that take up screen real estate not devoted to text editing.
In the example above, the <code>TreeView</code> is appended to the left, and the
<code>CommandPanel</code> is appended to the top.</p>

<pre lang="coffeescript"><div class="line"><span class="source coffee"><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> place a view to the left of the panes</span></span></span></div><div class="line"><span class="source coffee"><span>atom</span><span class="meta delimiter method period coffee"><span>.</span></span><span>workspaceView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>appendToLeft</span><span class="meta brace round coffee"><span>(</span></span><span class="meta class instance constructor"><span class="keyword operator new coffee"><span>new</span></span><span> </span><span class="entity name type instance coffee"><span>MyView</span></span></span><span class="meta brace round coffee"><span>)</span></span></span></div><div class="line"><span class="source coffee"><span> </span></span></div><div class="line"><span class="source coffee"><span class="comment line number-sign coffee"><span class="punctuation definition comment coffee"><span>#</span></span><span> place a view below the panes</span></span></span></div><div class="line"><span class="source coffee"><span>atom</span><span class="meta delimiter method period coffee"><span>.</span></span><span>workspaceView</span><span class="meta delimiter method period coffee"><span>.</span></span><span>appendToBottom</span><span class="meta brace round coffee"><span>(</span></span><span class="meta class instance constructor"><span class="keyword operator new coffee"><span>new</span></span><span> </span><span class="entity name type instance coffee"><span>MyOtherView</span></span></span><span class="meta brace round coffee"><span>)</span></span></span></div></pre>
    </div>
    <div class="column sidebar documents-toc">
      <select class="js-doc-version-switcher version-switcher">
  <option value="v0.69.0">v0.69.0</option>
<option value="v0.68.0">v0.68.0</option>
<option value="v0.67.0">v0.67.0</option>
<option value="v0.66.0">v0.66.0</option>
<option value="v0.65.0">v0.65.0</option>
<option value="v0.64.0">v0.64.0</option>
<option value="v0.63.0">v0.63.0</option>
<option value="v0.62.0">v0.62.0</option>
<option selected="selected" value="v0.61.0">v0.61.0</option>
<option value="v0.60.0">v0.60.0</option>
<option value="v0.59.0">v0.59.0</option>
<option value="v0.58.0">v0.58.0</option>
<option value="v0.57.0">v0.57.0</option>
<option value="v0.56.0">v0.56.0</option>
<option value="v0.55.0">v0.55.0</option>
<option value="v0.54.0">v0.54.0</option>
<option value="v0.53.0">v0.53.0</option>
<option value="v0.51.0">v0.51.0</option>
<option value="v0.50.0">v0.50.0</option>
<option value="v0.49.0">v0.49.0</option>
<option value="v0.48.0">v0.48.0</option>
<option value="v0.47.0">v0.47.0</option>
<option value="v0.46.0">v0.46.0</option>
<option value="v0.45.0">v0.45.0</option>
<option value="v0.44.0">v0.44.0</option>
<option value="v0.41.0">v0.41.0</option>
<option value="v0.40.0">v0.40.0</option>
<option value="0.52.0">0.52.0</option>
</select>


      <ul class="navigation">
        <li><a href="" class="is-selected">Documentation</a></li>
        <li><a href="../../api/v0.61.0/api/index.html">API</a></li>
      </ul>

      <hr />

      <form accept-charset="UTF-8" action="/docs/v0.61.0/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
        <input class="sidebar-search-field" id="q" name="q" placeholder="Search documentation" type="text" value="" />
</form>
      <h2>
<a name="guides" href="view-system.html#guides"></a>Guides</h2>

<ul>
<li><a href="../getting-started.html">Getting Started</a></li>
<li><a href="../customizing-atom.html">Customizing Atom</a></li>
<li><a href="../creating-a-package.html">Creating a Package</a></li>
<li><a href="../creating-a-theme.html">Creating a Theme</a></li>
<li><a href="../publishing-a-package.html">Publishing a Package</a></li>
<li><a href="../converting-a-text-mate-bundle.html">Converting a TextMate Bundle</a></li>
<li><a href="../converting-a-text-mate-theme.html">Converting a TextMate Theme</a></li>
<li><a href="../contributing.html">Contributing</a></li>
</ul><h3>
<a name="advanced-topics" href="view-system.html#advanced-topics"></a>Advanced Topics</h3>

<ul>
<li><a href="configuration.html">Configuration</a></li>
<li><a href="keymaps.html">Keymaps</a></li>
<li><a href="serialization.html">Serialization</a></li>
<li><a href="view-system.html">View System</a></li>
</ul>
    </div>
  </div>
</div>


    <div class="footer-pad"></div>
  </div>

  <footer>
  <div class="footer">
    <div class="wrapper">
      <ul class="footer-left">
        <li><a href="../../../terms.html">Terms of Use</a></li>
          <li><a href="https://atom.io/login">Sign in</a></li>
      </ul>

      <div class="footer-right">
        <a href="https://github.com"><span class="octicon octicon-code"></span> with <span class="octicon octicon-heart"></span> by <span class="octicon octicon-logo-github"></span></a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>
